<template>
  <div>
    <div class="shareDetail">
      <van-nav-bar>
        <template #left>
          <i @click="$router.back()" class="iconfont icon-zuojiantou"></i>
        </template>
      </van-nav-bar>
      <div class="content">
        <div class="title">{{ detail.title }}</div>
        <div class="info">
          <div class="pic">
            <img
              v-if="detail?.author?.avatar"
              :src="imgHost + detail?.author?.avatar"
              alt=""
            />
          </div>
          <div class="text">
            <span class="nick">{{ detail.author?.nickname }}</span>
            <span class="date">{{ date }}</span>
          </div>
        </div>
      </div>
      <div class="article" v-html="detail.content"></div>
      <div class="commentTitle">
        <div class="ct">
          <span class="c">评论</span>
          <span class="num">{{ totalComment }}</span>
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in list" :key="index" class="info">
            <div class="pic">
              <img :src="imgHost + item.author.avatar" alt="" />
            </div>
            <div class="text">
              <div class="nick">{{ item.author.nickname }}</div>
              <div class="date">
                <div>{{ item.date }}</div>
                <div>{{ item.star }} <van-icon name="good-job-o" /></div>
              </div>
              <div>{{ item.content }}</div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <div class="comment">
      <div>
        <input
          v-model="inputValue"
          @click="show = true"
          type="text"
          placeholder="我来补充两句"
        />
      </div>
      <div class="detail">
        <span class="star">
          <van-icon
            @click="collect"
            :class="`${collectList.includes($route.params.id) ? 'active' : ''}`"
            name="star-o"
          />
          <span>{{ collectNum }}</span>
        </span>
        <span class="good">
          <good-job
            :id="$route.params.id"
            :class="`${list1.includes($route.params.id) ? 'active' : ''}`"
          />
          <span>{{ goodTotal }}</span>
        </span>
        <span class="icon">
          <i class="iconfont icon-fenxiang"></i>
          <span>118</span>
        </span>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div style="padding: 15px">
        <van-field
          v-model="inputValue"
          rows="4"
          autosize
          type="textarea"
          class="popupInput"
          placeholder="我来补充两句"
        />

        <div
          style="text-align: right; margin-top: 10px; color: #d0d0d5"
          @click="leave"
          :class="{ send: inputValue }"
        >
          发送
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { shareDetailList, shareComment, leaveComment, collectList, goodArticle } from '@/api/InterviewSkills'
import GoodJob from '@/components/Find/GoodJob.vue'
export default {
  components: { GoodJob },
  data () {
    return {
      inputValue: '',
      detail: '',
      date: '',
      imgHost: 'http://hmmm.zllhyy.cn/',
      loading: false,
      finished: false,
      list: [],
      limit: 10,
      date2: '',
      start: 0,
      totalComment: 0,
      num: 0,
      show: false,
      collectNum: '',
      list1: [],
      goodTotal: '',
      collectList: []
    }
  },
  methods: {
    async collect () {
      const res = await collectList({
        id: this.$route.params.id,
        needToken: true
      })
      this.collectNum = res.data.num
      console.log(res);
      localStorage.setItem('collect', JSON.stringify(res.data.list))
      this.$toast.success('操作成功')
    },
    async leave () {
      const res = await leaveComment({
        content: this.inputValue,
        article: this.$route.params.id,
        needToken: true
      })
      this.list.shift(res.data)
      this.start = 0
      this.list = []
      // console.log(res);
      this.onLoad()
      this.inputValue = ''
      this.show = false
    },
    async onLoad () {
      const res = await shareComment({
        id: this.$route.params.id,
        limit: this.limit,
        start: this.start
      })
      console.log(res);
      this.list.push(...res.data.list)
      this.start = this.num * this.limit
      this.loading = false
      if (this.list.length >= res.data.total) {
        this.finished = true
      }
      this.num++
      this.totalComment = res.data.total

      this.list.map(v => {
        return v['date'] = dayjs(Date.parse(v.created_at)).format('YYYY-MM-DD')
      })
    }
  },
  async created () {
    if (localStorage.getItem('goodList')) {
      this.list1 = JSON.parse(localStorage.getItem('goodList'))
    }
    const res = await shareDetailList(this.$route.params.id)
    // console.log(res);
    this.detail = res.data
    const res2 = Date.parse(this.detail.created_at)
    const date = dayjs(res2).format('YYYY-MM-DD')
    this.date = date
    const res4 = await collectList({
      id: this.$route.params.id,
      needToken: true
    })
    this.collectNum = res4.data.num
    const res3 = await goodArticle({
      article: this.$route.params.id,
      needToken: true
    })
    // console.log(res3);
    this.goodTotal = res3.data.num
    if (localStorage.getItem('collect')) {
      this.collectList = JSON.parse(localStorage.getItem('collect'))
    }
  },
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.shareDetail {
  padding: 0px 15px;
  padding-bottom: 4rem;
  ::v-deep .van-nav-bar__left {
    padding: 0;
  }
  .iconfont {
    font-size: 1.875rem;
  }
  .content {
    .title {
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .info {
      display: flex;
      .pic {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .text {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .date {
          font-size: 0.32rem;
          color: #b4b4bd;
        }
        .nick {
          font-size: 12px;
          font-weight: 500;
          width: 50px;
          border-radius: 50%;
        }
      }
    }
  }
  .commentTitle {
    .ct {
      position: relative;
      .c {
        font-size: 18px;
        font-weight: 700;
      }
      .num {
        font-size: 12px;
        position: absolute;
        color: #b4b4bd;
      }
    }

    .info {
      margin-top: 1.25rem;
      display: flex;
      .pic {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .text {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .date {
          font-size: 0.32rem;
          color: #b4b4bd;
          display: flex;
          width: 80vw;
          justify-content: space-between;
          .van-icon-good-job-o {
            font-size: 20px;
          }
        }
        .nick {
          width: 100% !important;
          font-size: 12px;
          font-weight: 500;
          width: 50px;
          border-radius: 50%;
        }
      }
    }
  }
}
.comment {
  padding: 15px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;
  height: 4rem;
  input {
    width: 200px;
    font-size: 14px;
    height: 30px;
    border: none;
    background-color: #f5f4f5;
  }
  .detail {
    margin-left: 30px;
    color: #b4b4bd;
    display: flex;
    width: 100%;
    justify-content: space-between;

    span {
      text-align: center;
    }
    .star {
      display: flex;
      flex-direction: column;
      ::v-deep .van-icon {
        font-size: 25px;
      }

      .active {
        color: #e40137 !important;
      }
    }
    .good {
      display: flex;
      flex-direction: column;
      ::v-deep .van-icon {
        font-size: 25px;
      }

      .active {
        color: #e40137 !important;
      }
    }
    .icon {
      display: flex;
      flex-direction: column;
      .icon-fenxiang {
        font-size: 25px;
      }
    }
  }
}
.popupInput {
  background-color: #f6f4f4;
  border-radius: 5px;
}
.send {
  color: #d12d3e !important;
}
</style>
